<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/xiangqing.css">
<link rel="stylesheet" href="css/Unstyle.css">

<body>
    <header></header>
    <main>
    <div class="details-shang">

        <div class="details-zuoshang">

            <div class="details-kuang">
                <div class="details-kuang-tu">
                    <img src="" alt="">
                    <div class="zhezhao1"></div>
                    <!-- <div class="details-zuo"> < </div>
                    <div class="details-you"> > </div>
                            <ul class="details-dian">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul> -->
                    </div>
                </div>
                <div class="datu"></div>
            </div>

            <div class="details-youshang">
                <div class="details-mingcheng">DJI Mavic 3</div>
                <div class="details-jiage">¥12888</div>
                <div class="details-jieshao">
                    <li>4/3CMOS哈苏相机</li>
                    <li>46分钟飞行时间</li>
                    <li>全向避障</li>
                    <li>15公里高清图传</li>
                    <li>高级智能返航</li>
                </div>


                <div class="details-xuanze">选择的商品</div>
                <div class="details-leibei">
                    <div class="z1">DJI Mavic 3</div>
                    <div class="z2">￥12888 或低至￥590.70/月×24期</div>
                </div>
                <!-- <div class="details-leibei">
                    <div class="z1">DJI Mavic 3(套装1)</div>
                    <div class="z2">￥12888 或低至￥590.70/月×24期</div>
                </div>
                <div class="details-leibei">
                    <div class="z1">DJI Mavic 3(套装2)</div>
                    <div class="z2">￥12888 或低至￥590.70/月×24期</div>
                </div>
                <div class="details-leibei">
                    <div class="z1">DJI Mavic 3(套装2)</div>
                    <div class="z2">￥12888 或低至￥590.70/月×24期</div>
                </div>
                <div class="details-leibei">
                    <div class="z1">DJI Mavic 3(套装2)</div>
                    <div class="z2">￥12888 或低至￥590.70/月×24期</div>
                </div> -->


                <div class="gouwu">
                    <div class="gouwuche-0">加入购物车</div>
                    <div class="mai-0">立即购买</div>
                </div>
            </div>
        </div>
        <div class="ser">
            <div class="details-shenru">深入了解</div>
            <div><img src="img/tupian.png" alt=""></div>
        </div>

        </main>
        <footer></footer>
</body>
</html>
<script src="js/jquery-3.2.1.min.js"></script>

<script src="js/fangdajing.js"></script>
<script src="js/xiangqing.js"></script>
<script>
        $("header").load("head.html")
    $("footer").load("footer.html")
</script>

<script>
    let oSmallBox = document.querySelector(".details-kuang-tu");
    let oMask = document.querySelector(".zhezhao1");
    let oBigBox = document.querySelector(".datu");

    let mf = new Magnifier(oSmallBox,oMask,oBigBox);
</script>